<template>
  <div class="priceDifferencePool" :style="{ '--color': `${background_color}` }">
    <c-title :text="diyname"></c-title>
    <div class="headTop">
      <div class="background-box"></div>
      <div class="headTop_p">
        <div class="txt">当前{{diyname}}</div>
        <div class="txt_p">{{ info.pool }}</div>
        <div class="headTop_p_btn">
          <div class="btn left_btn" @click.stop="toBalance_recharge">充值</div>
          <div class="btn right_btn" @click="tobalance_withdrawalspdp">提现</div>
        </div>
      </div>

      <div class="recordBox">
        <van-tabs v-model="active">
          <van-tab title="明细记录"></van-tab>
        </van-tabs>
        <div class="line" v-for="item in pool_log" :key="item">
          <div class="dline">
            <div class="left">{{ item.source_name }}</div>
            <div class="right">{{ item.amount }}</div>
          </div>
          <div class="dline dline_m_t">
            <div class="left time">{{ item.created_at }}</div>
            <div class="right iconS" @click="popupShow(item.detail)" v-if="item.detail">
              查看
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" closeable @close="closePopup" close-on-click-overlay>
      <div class="popupBox">
        <div class="txt">查看</div>
        <div class="popupList">
          <div class="list_t">{{ popupItem.order_sn }}</div>
          <div class="lis">
            <div class="lis_l">
              <img :src="popupItem.thumb" alt="" />
            </div>
            <div class="lis_r">
              <div class="title">{{ popupItem.title }}</div>
              <div class="des" v-if="popupItem.describe">
                {{ popupItem.describe }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "../../utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      background_color: "#ffc11e",
      active: 0,
      show: false,
      info: [],
      pool_log: [],
      popupItem: [],
      diyname: "资金池",

      isLoadMore: true,
      page: 1,
      totalPage: 0
    };
  },
  activated() {
    this.getData();
    let info_basic = JSON.parse(localStorage.getItem("yz_basic_info"));
    this.diyname = info_basic.price_difference_pool_name ? info_basic.price_difference_pool_name : "资金池";
    this.fun.setWXTitle(this.diyname)
    this.background_color = info_basic.theme_color;
  },
  methods: {
    closePopup() {
      this.show = false;
      this.popupItem = [];
    },
    popupShow(item) {
      this.show = true;
      this.popupItem = item;
    },
    toBalance_recharge() {
      this.$router.push(this.fun.getUrl("balance_rechargepdp", {}));
    },
    tobalance_withdrawalspdp() {
      this.$router.push(this.fun.getUrl("balance_withdrawalspdp", {}));
    },
    getData() {
      $http.get("plugin.price-difference-pool.frontend.controllers.page.index", {}, "加载中").then(
        response => {
          if (response.result === 1) {
            this.info = response.data;
            this.pool_log = response.data.pool_log.data;
            this.isLoadMore = true;
            this.totalPage = response.data.pool_log.last_page;
            if (!this.totalPage) {
              this.totalPage = 0;
            }
          } else {
            Toast(response.msg);
          }
        },
        function(response) {
          console.log(response);
        }
      );
    },
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.totalPage) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          page: this.page
        };
        $http.post("plugin.price-difference-pool.frontend.controllers.page.index", json, "正在获取").then(
          response => {
            if (response.result == 1) {
              let arr = this.pool_log.concat(response.data.pool_log.data);
              this.pool_log = arr;
              this.isLoadMore = true;
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
              this.$dialog.alert({ message: response.msg });
            }
          }
        );
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.priceDifferencePool {
  min-height: 100vh;
}

.popupBox {
  .txt {
    margin: 1.13rem 0;
    font-size: 1rem;
    font-weight: 500;
  }

  .popupList {
    margin-top: 1.25rem;
    padding: 0 0.75rem;
    box-sizing: border-box;

    .list_t {
      text-align: left;
      font-size: 0.81rem;
      color: #999;
    }

    .lis {
      margin-top: 0.5rem;
      padding: 0.75rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .lis_l {
        flex-shrink: 0;
        width: 4.38rem;
        height: 4.38rem;
        border-radius: 0.31rem;
        margin-right: 0.38rem;

        img {
          width: 100%;
          height: 100%;
          border-radius: 0.31rem;
        }
      }

      .lis_r {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        overflow: hidden;

        .title {
          width: 100%;
          font-weight: 500;
          font-size: 1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: left;
        }

        .des {
          color: #999;
          margin-top: 1rem;

          .des_s {
            color: #f15353;
          }
        }
      }
    }
  }
}

.headTop {
  height: 8.41rem;

  .background-box {
    // padding-top: 10px;
    height: 8.41rem;
    color: #382c0a;
    background-color: #fff;
    background-image: linear-gradient(#ffc11e, #f5f5f5);
    background-image: var(--themeBgColor);
  }

  .recordBox {
    border-radius: 0.63rem;
    padding: 0.75rem;
    padding-top: 0;
    background: #fff;
    margin: 0 0.63rem;

    .line {
      padding: 0.75rem 0;
      border-bottom: 1px solid #f0f0f1;

      .dline {
        display: flex;
        justify-content: space-between;

        .right {
          display: flex;
          align-items: center;
        }

        .time {
          font-size: 0.69rem;
          color: #999;
        }

        .iconS {
          color: #f15353;
          font-size: 0.69rem;
        }
      }

      .dline_m_t {
        margin-top: 0.75rem;
      }
    }

    .line:last-child {
      border: none;
    }
  }

  .headTop_p {
    padding: 0.94rem 0;
    margin: 0 0.63rem;
    border-radius: 0.63rem;
    background: #fff;
    margin-top: -6.88rem;
    margin-bottom: 0.5rem;

    .txt {
      font-size: 0.75rem;
      color: #666;
    }

    .txt_p {
      font-size: 1.38rem;
      line-height: 1.5rem;
      font-weight: bold;
      margin-top: 1.25rem;
      margin-bottom: 1.25rem;
    }

    .headTop_p_btn {
      display: flex;
      align-items: center;
      justify-content: center;

      .btn {
        padding: 0.62rem 1.91rem;
        border-radius: 0.31rem;
      }

      .left_btn {
        background: var(--color);
        color: #fff;
      }

      .right_btn {
        background: #fff;
        color: var(--color);
        border: 1px solid var(--color);
        margin-left: 2.78rem;
      }
    }
  }
}
</style>
